<template>
	<view class="couponItem w100 flex-row-center">
		<view class="state-content flex-center" v-if="couponInfo.detail">
			<text class="text" v-if="couponInfo.detail==1">组队</text>
			<text class="text" v-else-if="couponInfo.detail==2">赛事</text>
			<text class="text" v-else-if="couponInfo.detail==3">充值</text>
			<text class="text" v-else-if="couponInfo.detail==4">陪玩</text>
		</view>
		<view class="item-left flex-center">
			<view class="price-box">
				<template v-if="couponInfo.type==1">
					<text class="unit">￥</text>
					<text class="price">{{couponInfo.amount}}</text>
				</template>
				<template v-else-if="couponInfo.type==2">
					<text class="price">{{couponInfo.rate}}</text>
					<text class="unit">折</text>
				</template>
			</view>
			<text class="tips">满{{couponInfo.limit_amount}}可用</text>
		</view>
		<view class="coupon-info flex-row-center">
			<view class="info-box flex">
				<text class="name">{{couponInfo.title}}</text>
				<text class="time" v-if="couponInfo.expires_time_text">有效期：{{couponInfo.expires_time_text}}</text>
				<text class="time" v-else-if="couponInfo.validity">有效期：{{couponInfo.validity}}天</text>
				<view class="rule-box flex-row-center" @click.stop="viewRule(couponInfo)">
					<text class="text">使用规则：{{couponInfo.description}}</text>
					<!-- <up-icon name="arrow-right" color="#A5A6A7" size="28rpx"></up-icon> -->
				</view>
			</view>
			<view class="option-box flex-center">
				<image src="@/static/coupon/lose_coupon_icon.png" v-if="itemType==='expire'" class="icon" mode="">
				</image>
				<image src="@/static/coupon/used_coupon_icon.png" v-else-if="itemType==='used'" class="icon" mode="">
				</image>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		couponInfo: {
			type: Object,
			default: () => ({})
		},
		type: {
			type: String,
			default: 'use'
		}
	})
	const couponInfo = ref(computed(() => props.couponInfo));
	const itemType = ref(computed(() => props.type));
	const viewRule = (item) => {
		if (!item.description) return
		uni.showModal({
			title: '提示',
			content: item.description,
			success: function(res) {
	
			}
		});
	
	}
</script>

<style lang="scss" scoped>
	.couponItem {
		// border: 1rpx solid red;
		padding: 24rpx 0;
		padding-right: 24rpx;
		border-radius: 12rpx;
		background-color: #222528;
		position: relative;
		.state-content {
			border-radius: 18rpx 0 18rpx 0;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 99;
			height: 36rpx;
			width: 120rpx;
			background-color: #ccc;
			.text {
				font-size: 22rpx;
				color: #fff;
				text-align: center;
				line-height: 36rpx;
			}
		}

		.item-left {
			flex-direction: column;
			margin-right: 24rpx;
			border-right: 1rpx dashed $description-color;
			padding: 0 24rpx;

			.price-box {
				color: $description-color;

				.unit {
					font-size: 28rpx;
					font-weight: 500;
				}

				.price {
					font-size: 38rpx;
					font-weight: 800;
				}
			}

			.tips {
				color: $description-color;
				font-size: 26rpx;
				margin-top: 12rpx;
			}
		}

		.coupon-info {
			justify-content: space-between;
			flex: 1;

			.info-box {
				flex-direction: column;
				flex: 1;
			}

			.name {
				display: block;
				width: 300rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: $description-color;
				text-overflow: ellipsis;
				white-space: nowrap;
				lines: 1;
				overflow: hidden;
			}

			.time {
				font-size: 24rpx;
				color: $description-color;
				margin-top: 12rpx;
			}

			.rule-box {
				font-size: 24rpx;
				color: $description-color;
				margin-top: 12rpx;

				.text {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					word-break: break-all;
					-webkit-box-orient: vertical;
				}
			}

			.option-box {
				flex-shrink: 0;

				.icon {
					width: 96rpx;
					height: 96rpx;
				}
			}
		}
	}
</style>